<template>
	<view class="content">
		<view class="my_teams" style="height:90rpx ; ">
			<view style="   margin: 0 20rpx 0 20rpx;" >
				<text class="name">我的团队数量 {{count}} 位</text>
			</view>
		</view>
		<view v-for="(item,index) in myTeamList" :key="index">
			<view class="my_teams">
				<image :src="item.avatar?item.avatar:'/static/person.png'" mode="" class="avator"></image>
				<view class="my_team">
					<view class="nameID">
						<text class="name">{{item.nickname}}</text>
						<text class="ID">(ID {{item.id}})</text>
					</view>
					<!-- <view class="tjr">推荐人：{{item.parent_name}}</view> -->
					<view class="gzsj">关注时间：{{item.createdAt}}</view>
				</view>
			</view>
		</view>

		<view v-if="myTeamList.length == 0">
			<u-empty mode="search" text="暂无相关人员"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		fxteamuesrs,
	} from '@/api/user.js'
	import {
		useStore
	} from '@/store/index.js'
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	export default {

		setup() {
			const store = useStore()
			const state = reactive({
				userInfo: computed(() => store.userInfo),
				myTeamList:[],
				count:"0",
			})
			onLoad((option) => {
				getData()
			})
			const getData = async () => {				
				const {
					data
				} = await fxteamuesrs({
					pageSize: 500,
					page: 1,
				})
				state.myTeamList = data.records;
				state.count = data.total;
				if(data.records.length>0){
					const {
					data
				} = await fxteamuesrs({
					pageSize: 500,
					page: 2,
				})
				state.myTeamList =state.myTeamList.concat( data.records);
				}
			}
			
		
			return {
				...toRefs(state),
				getData,
			}
		}

	}
</script>

<style>
	page {
		background-color: #f2f2f2;
	}
	.content {
		height: 100%;
		overflow-y: auto;
	}
	.u-empty {
		background-color: #f2f2f2;
	}

	.avator {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin: 0 20rpx 0 20rpx;
	}

	.my_teams {
		width: 720rpx;
		height: 180rpx;
		background-color: #ffffff;
		margin: 20rpx 15rpx 20rpx 15rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.ID {
		font-size: 24rpx;
		font-family: Arial-Bold, Arial;
		font-weight: bold;
		color: #B6B6B6;
		margin-left: 20rpx;
	}

	.tjr {
		font-size: 26rpx;
		font-family: Arial-Bold, Arial;
		font-weight: 400;
		margin: 10rpx 0 10rpx 0;
	}

	.gzsj {
		font-size: 26rpx;
		font-family: Arial-Bold, Arial;
		font-weight: 400;
		color: #B6B6B6;
	}
</style>
